<script setup lang="ts">
	import {
		ref
	} from 'vue'
	import {
		MapLocation,
	} from '@element-plus/icons-vue'
	import type {
		UploadProps
	} from 'element-plus'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import type {
		FormInstance,
		FormRules,
	} from 'element-plus'
	import useSettingsStore from '@/store/modules/settings'
	import router from '@/router'
	import setupApi from '@/api/zhitan/setup'
	import dictApi from '@/api/modules/system/dict'
	import useUserStore from '@/store/modules/user'


	// import showInfo from './client.vue'
	// import showHomemaking from './homemaking.vue'
	// import showAdd from './add.vue'
	// import showRecord from './record.vue'
	const userStore : any = useUserStore()
	const loadingRef : any = ref(null)
	const copyopen = ref(false)
	const copydata : any = ref({})

	const paging : any = ref({
		page: 1,
		limit: 10,
	})
	const total : any = ref(0)
	const dataList : any = ref([])
	const show_add : any = ref(false)
	const typeList : any = ref([]) //类型
	const signList : any = ref([
		{
			id: '公司',
			name: '公司',
		},
		{
			id: '劳务',
			name: '劳务',
		},
		{
			id: '雇主',
			name: '雇主',
		}
	]) //签署人
	onMounted(async () => {
		getList()
		typeList.value = await getDict(6)
	})
	const formRef = ref<FormInstance>()
	const formRules = ref<FormRules>({
		name: [{
			required: true,
			message: '请输入名称',
			trigger: 'blur',
		}],
		type: [{
			required: true,
			message: '请选择协议类型',
			trigger: 'blur'
		},],
		required_signatory: [{
			required: true,
			message: '请添加所需签署人',
			trigger: 'blur'
		},]
	})
	function getDict(id : any) {
		return new Promise((resolve, reject) => {
			dictApi.index({
				page: 1,
				limit: 9999,
				dictId: id,
			}).then((res : any) => {
				resolve(res.data.map((i : any) => {
					i.id = Number(i.id)
					return i
				}));
			})
		});
	}
	// 分页代码
	function pagChange(e : any) {
		paging.value = Object.assign(paging.value, e)
		getList()
	}
	function getList() {
		setupApi.Pact_list(paging.value).then((res : any) => {
			total.value = res.count
			dataList.value = res.data
		})
	}
	function paginationChange(e : any, key : string) {
		paging.value[key] = e
		getList()
	}
	function changeAdd(row : any) {
		router.push({
			name: 'contractadd',
			query: {
				id: row ? row.id : null,
			},
		})
	}
	function modify(e : any, item : any) {
		switch (e) {
			case 'edit':
				router.push({
					name: 'contractadd',
					query: {
						id: item ? item.id : null,
					},
				})
				break;
			case '启用':
				setupApi.Pact_edit({
					id: item.id,
					status: 1,
				}).then((res : any) => {
					ElMessage({
						message: res.msg,
						type: 'success'
					})
					getList()
				})
				break;
			case '禁用':
				setupApi.Pact_edit({
					id: item.id,
					status: 0,
				}).then((res : any) => {
					ElMessage({
						message: res.msg,
						type: 'success'
					})
					getList()
				})
				break;
		}

	}
	const width : any = ref('0px')
	function copyData(e : any) {
		copyopen.value = true
		copydata.value = JSON.parse(JSON.stringify(e))
		copydata.value.required_signatory = copydata.value.required_signatory.split(',')
	}
	function removeBatch(row : any) {
		setupApi.Pact_delete({ id: row.id }).then((res : any) => {
			ElMessage({
				message: res.msg,
				type: 'success'
			})
			getList()
		})
	}
	function copySubmit() {
		formRef.value && formRef.value.validate((valid : any) => {
			if (valid) {
				const obj : any = Object.assign({}, copydata.value)
				obj.required_signatory = obj.required_signatory.join(',')
				obj.type_name = typeList.value.find((item : any) => item.id == obj.type).name
				// obj.json = JSON.stringify(obj.json)
				delete obj.id
				console.log(obj, '提交参数')
				// return false
				setupApi.Pact_edit(obj).then((res : any) => {
					ElMessage({
						message: res.msg,
						type: 'success'
					})
					getList()
					copyopen.value = false
					// emits('updateTable', true) // 告诉父组件
				})
			}
		})
	}
</script>

<template>
	<div>
		<div style="height: calc(100%);">
			<page-main>
				<div>
					<div>
						<div class="d-c flex">
							<el-form :inline="true" class="demo-form-inline">
								<el-form-item label="名称">
									<el-input v-model="paging.name" placeholder="输入协议名称" clearable
										@clear="paging.name = null" />
								</el-form-item>
								<el-form-item label="状态" style="width: 200px;">
									<el-select v-model="paging.status" placeholder="请选择">
										<el-option label="启用" value="1" />
										<el-option label="禁用" value="0" />
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" class="mr-3" @click="getList()">
										<template #icon>
											<svg-icon name="ep:search" />
										</template>
										查询
									</el-button>
									<el-button @click="paging = {
						    page: 1,
						    limit: 10,
						  }, getList()">
										重置
									</el-button>
								</el-form-item>
							</el-form>
							<div class="btnbox" v-if="userStore.permissions.includes('contractadd')">
								<el-button type="primary" size="default" @click="modify('edit', null)">
									<template #icon>
										<svg-icon name="ep:plus" />
									</template>
									新增协议模版
								</el-button>
							</div>
						</div>
						<div class="rel">
							<loading ref="loadingRef" />
							<el-table :data="dataList" highlight-current-row border class="mytable-scrollbar"
								height="60vh">
								<el-table-column prop="id" label="ID" width="60" align="center" />
								<el-table-column label="协议名称" align="left">
									<template #default="{ row:i }">
										<span>{{i.name}}</span>
									</template>
								</el-table-column>
								<!-- <el-table-column label="所需签署人" align="center" width="150">
									<template #default="{ row:i }">
										<span>{{i.required_signatory}}</span>
									</template>
								</el-table-column>
								<el-table-column label="协议类型" align="center" width="150">
									<template #default="{ row:i }">
										<span>{{i.type_name}}</span>
									</template>
								</el-table-column> -->
								<el-table-column prop="sort" label="排序" width="100" align="center" />
								<el-table-column prop="status" label="状态" width="120" align="center">
									<template #default="{ row }">
										<div v-if="row.status === 1" class="relative flex items-center justify-center">
											<div data-v-7edfc4d9="" class="badge relative mr-2 inline-flex">
												<span
													class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
											</div>
											正常
										</div>
										<div v-else class="relative flex items-center justify-center">
											<div data-v-7edfc4d9="" class="badge downcol relative mr-2 inline-flex">
												<span
													class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
											</div>
											暂停
										</div>
									</template>
								</el-table-column>
								<el-table-column fixed="right" label="操作" width="280" align="center">
									<template #default="{ row:i }">
										<el-button type="primary" text @click="modify('edit', i)"
											v-if="userStore.permissions.includes('contract_edits')">
											<template #icon>
												<svg-icon name="ep:edit" />
											</template>
											<span>修改</span>
										</el-button>
										<el-button
											v-if="i.status==0 && userStore.permissions.includes('contractstatus')"
											type="danger" text @click="modify('启用', i)">
											<template #icon>
												<svg-icon name="ep:edit" />
											</template>
											<span>启用</span>
										</el-button>
										<el-button
											v-if="i.status==1 && userStore.permissions.includes('contractstatus')"
											type="primary" text @click="modify('禁用', i)">
											<template #icon>
												<svg-icon name="ep:edit" />
											</template>
											<span>禁用</span>
										</el-button>
										<!-- <el-button type="primary" text @click="copyData(i)">
											<template #icon>
												<svg-icon name="ep:edit" />
											</template>
											<span>复制</span>
										</el-button> -->
										<el-popconfirm title="确定删除吗？" @confirm="removeBatch(i)"
											v-if="userStore.permissions.includes('contractdelete')">
											<template #reference>
												<el-button type="danger" :disabled="i.status==1" text>
													<template #icon>
														<svg-icon name="ep:delete" />
													</template>删除
												</el-button>
											</template>
										</el-popconfirm>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<page-compon :page="paging.page" :size="paging.limit" :total="total" style="margin-top: 16px;"
							@pag-change="pagChange" />
					</div>
				</div>
			</page-main>
		</div>

		<HDialog v-model="show_add" title="新增简历" modulewidth="650px">
			<showAdd v-if="show_add" />
			<template #footer>
				<div class="w-full flex aic" style="justify-content: flex-end;">
					<el-button @click="show_add = false">
						取消
					</el-button>
					<div style="width: 10px"></div>
					<el-button type="primary" @click="modify('保存',null)">
						保存
					</el-button>
				</div>
			</template>
		</HDialog>
		<HDialog v-model="copyopen" title="复制模板" modulewidth="650px">
			<el-form ref="formRef" :model="copydata" :rules="formRules" label-position="top" label-width="100px">
				<div>
					<el-row :gutter="24">
						<el-col :xs="24" :sm="24" :md="24" :lg="24">
							<el-form-item label="名称" prop="name">
								<el-input v-model="copydata.name" size="large" placeholder="请输入标题" clearable />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :xs="24" :sm="24" :md="12" :lg="12">
							<el-form-item label="类型" prop="type">
								<el-select v-model="copydata.type" placeholder="选择协议类型" size="large">
									<el-option v-for="item in typeList" :key="item.id" :label="item.name"
										:value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12">
							<el-form-item label="所需签署人" prop="required_signatory">
								<el-select multiple v-model="copydata.required_signatory" placeholder="所需签署人"
									size="large">
									<el-option v-for="item in signList" :key="item.id" :label="item.name"
										:value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
			<template #footer>
				<div class="w-full flex aic" style="justify-content: flex-end;">
					<el-button @click="copyopen = false">
						取消
					</el-button>
					<div style="width: 10px"></div>
					<el-button type="primary" @click="copySubmit()">
						保存
					</el-button>
				</div>
			</template>
		</HDialog>
	</div>
</template>

<style lang="scss" scoped>
	p {
		margin: 0;
		padding: 0;
	}



	.el-card.grid-content {
		background-color: var(--g-toolbar-bg);
		padding: 10px 16px 16px;
		transition: var(--el-transition-duration);
		border: none;
		position: relative;

		.title {
			position: relative;
			height: 40px;
			padding-left: 16px;
			line-height: 40px;
			font-size: 20px;
			margin-bottom: 8px;

			.subtitle {
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.title::before {
			position: absolute;
			content: "";
			width: 4px;
			height: 20px;
			left: 0;
			border-radius: 4px;
			top: 50%;
			transform: translateY(-50%);
			background: var(--el-color-primary);
		}

		.addbtn {
			position: absolute;
			right: 15px;
			top: 9px;
			z-index: 1000;
		}
	}

	:deep(.el-card.grid-content>.el-card__body) {
		padding: 0;
	}

	.gaikuang>div {
		width: calc((100% - 80px) / 4);
		background-color: var(--g-main-bg);
		border-radius: 6px;
		padding: 10px 16px;
		margin: 0 10px;
	}

	.gaikuang>div:hover {
		background: linear-gradient(to right, #d2dff4, #ebf3ff);
	}

	.dark .gaikuang>div:hover {
		background: #26303a;
	}

	.gaikuang .tit {
		font-size: 16px;
	}

	.gaikuang .num {
		font-size: 26px;
	}

	.gaikuang .txt {
		font-size: 14px;
		margin-left: 10px;
		color: var(--el-text-color-secondary);

		span {
			color: var(--el-text-color-regular);
			margin-left: 6px;
		}

		.el-icon {
			font-weight: bolder;
			font-size: 20px;
		}

		.ico {
			width: 14px;
			height: 14px;
			margin-left: 6px;
		}
	}

	.biaoshi {
		padding: 2px 4px;
		border-radius: 2px;
		background: linear-gradient(90deg, rgb(255 226 171 / 100%) 4.17%, rgb(252 198 139 / 100%) 100%);
		font-size: 14px;
		font-weight: 900;
		letter-spacing: 0;
		line-height: 18px;
		color: rgb(135 97 31 / 100%);
	}

	.suspension:hover {
		transition: all 0.3s ease;
		transform: translateY(-4px) scale(1);
		box-shadow: 0 14px 24px rgb(0 0 0 / 20%);
		box-shadow: 0 14px 24px #0003;
		z-index: 999;
		border-radius: 6px;
	}

	:deep(.progress .el-progress__text) {
		font-size: 16px !important;
	}

	.el-button+.el-button {
		margin-left: 0;
	}

	.merchants,
	.drawe-top {
		.tag {
			font-size: 12px;
			padding: 0 12px;
			margin-right: 6px;
			border-radius: 4px;
			background: #f1edf9;
			color: #7234ed;
		}

		.tag.danger {
			background: #ffeef2;
			color: #ed1c4d;
		}

		.tag.warning {
			background: #fbedd7;
			color: #ff9f05;
		}
	}

	.detail {
		background: #f5f5f5;
	}

	.drawe-top {
		position: relative;
		background: #fff;
		margin-bottom: 12px;

		.tag {
			padding: 3px 12px;
		}

		.qiehuanico {
			position: absolute;
			right: 10px;
			top: 15px;

			div {
				width: 40px;
				height: 24px;
				line-height: 24px;
				text-align: center;
				font-size: 16px;
				color: #666;
				margin: 0 4px;
				border: 1px solid #eee;
				border-radius: 4px;
				background: #f5f5f5;
			}
		}

		.lable-caogao {
			position: absolute;
			right: 15px;
			bottom: 20px;
		}

		.info {
			div {
				position: relative;
				padding-right: 15px;

				&::after {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					content: "";
					width: 1px;
					height: 80%;
					background: #ddd;
				}
			}

			div:last-child::after {
				width: 0;
			}
		}
	}

	.store-tit {
		position: relative;
		padding-left: 10px;
	}

	.store-tit::before {
		position: absolute;
		content: "";
		width: 3px;
		height: 18px;
		left: 0;
		border-radius: 4px;
		top: 50%;
		transform: translateY(-50%);
		background: var(--el-color-primary);
	}

	.table {
		border-radius: 2px;
		border: 1px solid #e5e5e5;
		overflow: hidden;
		color: #000;
		font-size: 12px;

		.table-list {
			border-bottom: 1px solid #e5e5e5;
			min-height: 45px;
			font-size: 13px;
			position: relative;

			.itendiv {
				line-height: 44px;
				padding: 0 12px;
			}

			.imgssto {
				padding: 0;
			}

			.bg-gray {
				background-color: #f8f8f8;
				width: 80px;
				height: 100%;
				position: absolute;
			}

			// .neirong {
			//   width: calc((100% - 160px) / 2);
			// }

			&:last-child {
				border-bottom: none;

				div {
					line-height: 45px;
				}
			}
		}

		.table-list.line-sigle .neirong {
			padding-left: 90px;
			// width: calc(100% - 80px);
		}
	}

	.picbox {
		.pic-sigle {
			width: 120px;
			// height: 120px;
			border-radius: 4px;
			padding: 4px;
			margin-right: 15px;

			img {
				width: 106px;
				height: 106px;
			}

			.img {
				width: 106px !important;
				height: 106px !important;
				border: 1px dashed #ddd;
			}
		}
	}

	:deep(.el-upload__tip) {
		display: none;
	}

	// .upload-container {
	//   :deep(.images) {
	//     margin-bottom: 5px;
	//   }
	// }
	.text-container {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.text-container1 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 设置最大行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出行数后的省略显示 */
	}

	.downcol {
		.before\:bg-ui-primary::before {
			background-color: red;
		}

		.bg-ui-primary {
			background-color: red;
		}
	}

	.btnbox {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.btnbox>.el-button {
		font-size: 12px;
	}
</style>